<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>报表插件echarts展示</title>
    <script type="text/javascript" src="${pageContext.request.contextPath}/jquery/jquery-1.11.1-min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/jquery/echarts/echarts.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
    <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/jquery/bootstrap_3.3.0/css/bootstrap.min.css">
    <script>
        $(function (){
            $.ajax({
                url:"${pageContext.request.contextPath}/chart/getStageAndStageNumber",
                type:"post",
                dataType:"json",
                success:function (data){
                    // 基于准备好的dom，初始化echarts实例
                    var myChart = echarts.init(document.getElementById('main'));

                    // 指定图表的配置项和数据
                    var option = {
                        title: {
                            text: '交易数量统计表'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: '{b} : {c}'
                        },
                        toolbox: {
                            feature: {
                                dataView: { readOnly: true },
                                restore: {},
                                saveAsImage: {}
                            }
                        },
                        series: [
                            {
                                name: 'Expected',
                                type: 'funnel',
                                left: '10%',
                                width: '80%',
                                label: {
                                    formatter: '{b}Expected'
                                },
                                labelLine: {
                                    show: true
                                },
                                itemStyle: {
                                    opacity: 0.7
                                },
                                emphasis: {
                                    label: {
                                        position: 'inside',
                                        formatter: '{b}Expected: {c}'
                                    }
                                },
                                data:data
                            }
                        ]
                    };

                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                }
            });

        })
    </script>
    <style>
        html, body {
            height: 100%;
        }

        #main {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: auto;
            margin-bottom: auto;
        }
    </style>
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" class="center-block" style="width: 600px;height:400px;"></div>
</body>

</html>
